.apm-module-container {
	padding: 48px 0;

	.header {
		h1 {
			font-size: 24px;
			font-weight: 500;
		}

		h4 {
			font-size: 14px;
			font-weight: 300;
		}
	}
}

.supported-languages-container {
	display: flex;
	gap: 24px;
}

.supported-language {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 300px;
	height: 120px;
	background: #1d1d1d;
	border: 1px solid #424242;
	border-radius: 3px;
	color: #424242;
	cursor: pointer;

	&.selected {
		background-color: #111a2c;
		border: 0.5px solid #3c89e8;
	}
}

.supported-langauge-img {
	height: 48px;
}

.selected-langauage-setup-instructions {
	padding: 24px 0;
}

div[class*='-setup-instructions-container'] {
	.header {
		display: flex;
		align-items: center;

		margin: 16px 0;

		img {
			height: 40px;
		}

		h1 {
			font-size: 18px;
			display: flex;
			align-items: center;
			color: #e5e7eb;
			gap: 16px;
			margin: 12px;
		}
	}
}

.label {
	font-size: 14px;
	margin-bottom: 8px;
	font-weight: 300;
}

pre {
	background-color: #292d3e;
	padding: 8px;
	overflow: auto;
	border-radius: 3px;

	code {
		overflow: auto;
		text-wrap: wrap;
	}
}

.content-container {
	padding: 24px;
	margin: 16px 0;
	background: rgba(29, 29, 29, 1);
	line-height: 20px;
}

.detailed-docs-link {
	display: flex;
	margin: 12px;
	font-size: 12px;

	a {
		padding-left: 4px;
	}
}

.form-container {
	display: flex;
	align-items: flex-start;
	width: 100%;
	gap: 16px;

	& .ant-form-item {
		margin-bottom: 0px;
	}
}

$lightModeFontColor: rgb(29, 29, 29);

.lightMode {
	.apm-module-container {
		.header {
			color: $lightModeFontColor;
		}

		div[class*='-setup-instructions-container'] {
			.header {
				h1 {
					color: $lightModeFontColor;
				}
			}

			.framework-selector {
				.label {
					color: $lightModeFontColor;
				}
			}

			.service-name-container {
				.label {
					color: $lightModeFontColor;
				}
			}
		}
	}
}
